<template>
	<view class="page_scroll_view">
		<tn-navbar fixed :bottom-shadow="false">{{map[type]}}审核详情</tn-navbar>
		<scroll-view scroll-y="true">
			<view class="tn-flex tn-flex-column tn-flex-center tn-p-sm">
				<view class="card_item tn-p-sm tn-radius">
					<tn-title :title="map[type]+'信息'" mode="vLine" assist-color="tn-blue" size="lg" />
					<image :src="setImage(applyDetail.status)" mode="widthFix" class="status_img"></image>
					<view class="tn-flex tn-flex-column justify-around tn-mt-sm tn-border-top tn-gray-disabled_border">
						<template v-if="type!=='sale'">
							<text class="tn-mt-sm">
								<text>主体名称：</text>
								<text class="tn-text-sm">{{applyDetail.app_main}}</text>
							</text>
							<text class="tn-mt-sm">
								<text>注册地址：</text>
								<text class="tn-text-sm">{{applyDetail.app_address}}</text>
							</text>
						</template>
						<text class="tn-mt-sm">
							<text>申请备注：</text>
							<text class="tn-text-sm">{{applyDetail.remark?applyDetail.remark:'暂未填写备注'}}</text>
						</text>
						<text class="tn-mt-sm" v-if="applyDetail.cate_name">
							<text>商家类型：</text>
							<text class="tn-text-sm">{{applyDetail.cate_name}}</text>
						</text>
						<text class="tn-mt-sm">
							<text>申请人员：</text>
							<text class="tn-text-sm">{{applyDetail.user_name}}</text>
						</text>
						<text class="tn-mt-sm">
							<text>联系电话：</text>
							<text class="tn-text-sm">{{applyDetail.app_phone}}</text>
						</text>
						<text class="tn-mt-sm">
							<text>申请时间：</text>
							<text class="tn-text-sm">{{applyDetail.add_time}}</text>
						</text>
					</view>
				</view>
				<view class="card_item tn-p-sm tn-radius tn-mt tn-mb-xl">
					<tn-title title="图片资料" mode="vLine" assist-color="tn-blue" size="lg" />
					<view class="tn-flex tn-flex-column justify-around tn-mt-sm tn-border-top tn-gray-disabled_border">
						<template v-if="type!=='sale'">
							<view class="tn-mt-sm">
								<text>{{map[type]}}门面图</text>
								<tn-photo-album :data="[applyDetail.app_image]" />
							</view>
							<view class="tn-mt-sm">
								<text>{{map[type]}}资质</text>
								<tn-photo-album :data="applyDetail.app_cert" />
							</view>
							<view class="tn-mt-sm" v-if="applyDetail.hand_card">
								<text>法人手持</text>
								<tn-photo-album :data="[applyDetail.hand_card]" />
							</view>
						</template>
						<template v-else>
							<view class="tn-mt-sm">
								<text>{{map[type]}}头像</text>
								<tn-photo-album :data="[applyDetail.app_avatar]" />
							</view>
						</template>
					</view>
				</view>
				<view class="card_item tn-p-sm tn-radius tn-mt">
					<tn-title title="审批意见" mode="vLine" assist-color="tn-blue" size="lg" />
					<view class="tn-flex tn-flex-column justify-around tn-mt-sm tn-border-top tn-gray-disabled_border">
						<view class="tn-mt">
							<tn-input v-model="params.reason" type="textarea" placeholder="请输入审批意见" auto-height
								:maxlength="200" show-word-limit :disabled="applyDetail.status!==1" />
						</view>
					</view>
				</view>
				<view style="height: 120rpx;"></view>
			</view>
		</scroll-view>
		<view class="bottom_btn tn-flex justify-around items-center" v-if="applyDetail.status==1">
			<tn-button type="danger" width="45%" height="80" size="xl" font-size="32"
				@click="leaveApproval('refuse')">拒绝</tn-button>
			<tn-button type="primary" width="45%" height="80" size="xl" font-size="32"
				@click="leaveApproval('agree')">通过</tn-button>
		</view>
	</view>
	<tn-modal ref="modalRef" />
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		applyReviewApi
	} from "@/request/worktop/index.js"

	onLoad((e) => {
		const {
			item,
			app_type
		} = JSON.parse(decodeURIComponent(e.obj))
		applyDetail.value = item
		type.value = app_type
		params.value.id = item.id
		params.value.reason = item.error_mark
	})

	const type = ref('')
	const modalRef = ref()
	const content = ref('')
	const applyDetail = ref(null)
	const params = ref({
		id: 0,
		reason: '',
		action: 0
	})
	const map = {
		'seller': '商家',
		'delivery': '配送',
		'sale': '销售'
	}

	// 审核
	const leaveApproval = (status) => {
		if (status !== 'agree' && params.value.reason.trim() == '') {
			uni.showToast({
				title: '请先输入拒绝理由',
				icon: "none"
			})
			return
		}
		params.value.action = status
		modalRef.value?.showModal({
			title: '提示',
			content: `是否${status == 'agree' ? '通过' : '拒绝'}该申请吗？`,
			showCancel: true,
			confirm: () => {
				if (status == 'agree') {
					params.value.reason = '同意申请'
				}
				applyReview()
			}
		})
	}
	// 注册申请操作
	const applyReview = () => {
		applyReviewApi(params.value).then(res => {
			if (res.code == 0) {
				uni.showToast({
					title: res.message,
					success() {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			}
		}).catch(err => {
			uni.showToast({
				title: err.message,
				icon: "none"
			})
		})
	}
	// 设置状态背景
	const setImage = (status) => {
		if (status == 1)
			return 'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/10/40d99534-5b45-4b54-b6a2-8dcbff29a1a53d6ac6f11f07e4267ddbf5ca4b588e43.png'
		if (status == 5)
			return 'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/10/3f606aae-bd94-47c4-9037-083f8a76140b0bfa8894d9964a401ba86b8ad0b0dcc3.png'
		if (status == 4)
			return 'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/10/fcc77805-9cb9-459f-8e2e-35851d2fc67000e89b41ac938c456c67b816756a14cd.png'
	}
</script>

<style scoped lang="scss">
	.card_item {
		width: 100%;
		background-color: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10rpx);
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	}

	.bottom_btn {
		position: absolute;
		bottom: 0;
		right: 50%;
		transform: translateX(50%);
		width: 100vw;
		background-color: #fff;
		padding: 24rpx 0;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom) / 2);
	}
</style>